<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<title>The Apple.com navigation menu created using only CSS3.</title>
	<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<div id="wrapper">
    <h1>Apple.com menu.<small>Created using only CSS3.</small></h1>
    <div id="content">
		
        <nav>
            <ul id="appleNav">
                <li><a href="http://www.apple.com/" title="Apple"><img src="../imagens/logo.png" alt="Apple Logo" /></a></li>
                <li><a href="http://store.apple.com/" title="Store">Store</a></li>
                <li><a href="http://www.apple.com/mac/" title="Mac">Mac</a></li>
                <li><a href="http://www.apple.com/ipod/" title="iPod">iPod</a></li>
                <li><a href="http://www.apple.com/iphone/" title="iPhone">iPhone</a></li>
                <li><a href="http://www.apple.com/ipad/" title="iPad">iPad</a></li>
                <li><a href="http://www.apple.com/itunes/" title="iTunes">iTunes</a></li>
                <li><a href="http://www.apple.com/support/" title="Support">Support</a></li>
                <li>
                    <form>
                        <input type="text" />
                    </form>
                </li>
            </ul>
        </nav>
		
        <p><em>&quot;Look ma, no images!&quot;</em></p>
        <p>Well, that's not entirely true: The Apple logo and the magnifier are images, but everything else (shadows, gradients etc.) has been created using only CSS(3). Pretty cool, don't you think? You'll even see an animation of the menu, when viewing this page using a Webkit browser (Safari or Chrome).</p>
        <p>This menu is a clone of the current top menu of the <a href="http://www.apple.com/" title="Apple">Apple.com</a> website (without the animations/effects etc. of <a href="http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html" title="A fancy Apple.com-style search suggestion">the search navigation</a>). Dive into the source code of this page to find out how it's created.</p>
		
    </div>
</div>
</body>
</html>